<template>
    <div class="desk" id="desk" @click="close()" @contextmenu="rightClick($event, MenuType.Blank, {})">
        <div class="iconlist">
            <div class="item" @click="beginclick(item)" v-for="item in list">
                <div class="img">
                 <img src="../assets/cdn.png" v-if="item.name == '此电脑'" alt="">
                <img src="../assets/bl.png" v-if="item.name == 'bilibili'" alt="">
                <img src="../assets/gg.png" v-if="item.name == '谷歌'" alt=""></img>
                    <!-- <img :src="item.img" alt=""> -->
                </div>
                <div class="name">{{ item.name }}</div>
            </div>
        </div>

    </div>

    <div style="position:absolute;display:flex" id="cc" v-show="sfxs">
        <div class="menu">
            <el-popover placement="right-start" :width="200" trigger="hover">
                <div class="menuitem">
                    大图标</div>
                <div class="menuitem">
                    中图标</div>
                <div class="menuitem">
                    小图标</div>
                <template #reference>
                    <div class="menuitem flex">
                        <div>
                            <img src="../assets/查看.png" alt=""> 查看
                        </div>
                        <div>
                            <img src="../assets/arrow-right.png" style="float: right;    vertical-align: middle;"
                                alt="">
                        </div>
                    </div>
                </template>
            </el-popover>

            <el-popover placement="right-start" :width="200" trigger="hover">
                <div class="menuitem">
                    名称</div>
                <div class="menuitem">
                    大小 </div>
                <div class="menuitem">
                    日期</div>
                <template #reference>
                    <div class="menuitem flex">
                        <div>
                            <img src="../assets/排序.png" alt="">
                            排序
                        </div>
                        <div>
                            <img src="../assets/arrow-right.png" style="float: right;    vertical-align: middle;"
                                alt="">
                        </div>
                    </div>
                </template>
            </el-popover>


            <div class="menuitem"> <img src="../assets/刷新.png" alt="">
                刷新</div>
            <div class="menuitem"> <img src="../assets/查看.png" alt="">查看</div>
        </div>

    </div>
    <div class="cdndialog" v-if="computerxs">
        <div class="dheader">
            <div class="dhleft"><img src="../assets/cdn.png" style="width: 20px;height:20px" alt="">此电脑</div>
            <div class="dhright">
                <!-- <div>
                    <img src="../assets/min.png"  alt="">
                </div>
                <div>
                    <img src="../assets/add.png"  alt="">
                </div> -->
                <div>
                    <img src="../assets/close.png" @click="closedia" alt="">
                </div>
            </div>
        </div>
        <div class="flextree">
            <div class="tree">
                <el-tree :data="data" :props="defaultProps" accordion @node-click="handleNodeClick" default-expand-all>
                    <!-- 自定义树形结构图标 -->
                    <template #default="{ node, data }">
                        <span>
                            <img src="../assets/cdn.png" v-if="node.label == '此电脑'" style="width: 16px; height: 16px" />
                            <img src="../assets/cipan.png" v-if="node.label == '系统C'"
                                style="width: 16px; height: 16px" />
                            <img src="../assets/folder.png" v-if="node.label.includes('项目')"
                                style="width: 16px; height: 16px" />
                            {{ node.label }}
                        </span>
                    </template>
                </el-tree>

            </div>
            <div class="righttree">
                <div v-for="item in source" @click="sourcechange(item)" class="sourceitem">
                    <div class="img" style="text-align: center;">
                        <img src="../assets/gg.png" alt="">
                    </div>
                    <div class="names" style="text-align: center;">{{ item.name }}</div>
                </div>
            </div>
        </div>

    </div>


</template>
<style scoped>
.sourceitem {
    cursor: pointer;
    margin-right: 20px;
    width: 100px;
    height: 80px;

}

.names {
    color: #000;
    font-size: 14px;
}

.flextree {
    width: 100%;
    height: calc(100% - 40px);
    display: flex;
    background: #fff;
}

.righttree {
    width: calc(100% - 250px);
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
        align-content: flex-start;

}

.tree {
    width: 300px;
    border-right: 1px solid #eee;


}
</style>
<script setup>
import { require } from "../assets/require"
import { onMounted, ref, defineEmits } from 'vue';
const emit = defineEmits(['sendData']);
const handleNodeClick = (e) => {

}
const sourcechange=(item)=>{
window.open(item.url,"_blank")
}
const MenuType = ref({
    Blank: 'blank',
    Group: 'group',
    Instance: 'instance'
})
const isck = ref(false);
const closedia = () => {
    computerxs.value = false
}
const source = ref([
    {
        name: "在线教育网站",
        url: "https://mp.weixin.qq.com/s/fjzQZtU8cyCUiEE_95yVqA"
    },
    {
        name: "宠物商城",
        url: "https://mp.weixin.qq.com/s/KMybSW0SZXYwzjv3cXz8BA"
    },
    {
        name: "咖啡点单",
        url: "https://mp.weixin.qq.com/s/HbjC40prITRZznvZLeYGrA"
    },
    {
        name:"arcbbs论坛",
        url:"https://mp.weixin.qq.com/s/ODMWuU0wDTyzlP-rR0Rbzw"
    },
        {
        name:"卓旭商城",
        url:"https://mp.weixin.qq.com/s/PQ9N8DcEyc4bpXnjmPObFA"
    },
    {
        name:"零食商城",
        url:"https://mp.weixin.qq.com/s/cHcxNhfHpUGvemUDH9L_tg"
    },
    {
        name:"二手交易",
        url:"https://mp.weixin.qq.com/s/N9Bzvn70TwAgYFKbejuQBg"
    },
    {
        name:"智能新闻网",
        url:"https://mp.weixin.qq.com/s/Sf4IsD7tnritUzDI5s6o2g"
    },
    {
        name:"美食分享平台",
        url:"https://mp.weixin.qq.com/s/9nOUkPcF0usVxElq8IkqCg"
    },
    {
        name:"高校课程管理",
        url:"https://mp.weixin.qq.com/s/bzPhDZxytthRXtr2gW2kqA"
    },
    {
        name:"酒店预订",
        url:"https://mp.weixin.qq.com/s/hzZIFMeaTyHWgNbLbyM6CQ"
    },
    {
        name:"点餐系统",
        url:"https://mp.weixin.qq.com/s/wGWIsTR8800Fp7hpTSIvzQ"
    },
    {
        name:"鸿蒙音乐",
        url:"https://mp.weixin.qq.com/s/TensOzjf2Xxoq0sKv8pzow"
    },
    {
        name:"鸿蒙物流",
        url:"https://mp.weixin.qq.com/s/r1jjGUgEc6m0G7EmS85Ogg"
    },
    {
        name:"鸿蒙租房",
        url:"https://mp.weixin.qq.com/s/2qDyu_mbyY6uyNUPATWexw"
    },
    {
        name:"鸿蒙面试",
        url:"https://mp.weixin.qq.com/s/Fekox74fra695BOLc9QRbg"
    },
    {
        name:"猫咪直播",
        url:"https://mp.weixin.qq.com/s/CGCrazh0oYMbWU-H7I9M_g"
    }
    ,
    {
        name:"细信聊天",
        url:"https://mp.weixin.qq.com/s/9TSDNrY6MvO5Ae5tU9Iozw"
    }
    
    
])
const sfxs = ref(false);
const beginclick = (item) => {
    console.log(item);
    if (item.name == '此电脑') {
        computerxs.value = true
    }
}
const data = [
    {
        label: '此电脑',
        children: [
            {
                label: '系统C',
                children: [
                    {
                        label: '项目集',
                    },
                ],
            },
        ],
    },

]
const defaultProps = {
    children: 'children',
    label: 'label',
}
const watch1 = () => {
    console.log('123')
    isck.value = true
}
const computerxs = ref(false);
const leave1 = () => {
    isck.value = false

}
const list = [{
    img: require("../assets/cdn.png"),
    name: "此电脑"
}, {
    img: require("../assets/bl.png"),
    name: "bilibili"
}, {
    img: require("../assets/gg.png"),
    name: "谷歌"
}]
const close = () => {
    console.log("dd")
    sfxs.value = false
    emit("close")
}
onMounted(() => {

    const btn = document.querySelector("#desk");
    btn.onContextmenu = e => e.preventDefault();
    console.log(btn)
    btn.onmousedown = (e) => {
        e.preventDefault()
        //          console.log(e)
        //  emit('deskclick', e);
        // console.log(e.offsetX)

    }


})
const rightClick = (e) => {
    sfxs.value = true
    e.preventDefault()
    document.getElementById("cc").style.top = e.offsetY + 'px'
    document.getElementById("cc").style.left = e.offsetX + 'px'
    console.log(document.getElementById("cc").style)

}
</script>
<style scoped>
.dhright {
    display: flex;
}

.dhright img {
    width: 20px;
    margin-right: 10px;
    height: 20px;

}

.dheader {
    height: 40px;
    background: #e8e8e8;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top-left-radius: 5px;
    padding: 0px 10px;
    box-sizing: border-box;
    border-top-right-radius: 5px;
}

.dhleft img {
    vertical-align: middle;
    margin-right: 10px;

}

.cdndialog {
    width: 1573px;
    height: 750px;
    box-shadow: 0 5px 10px #0009;
    left: 202px;
    border-radius: 5px;

    top: 56.85px;
    position: absolute;
}
</style>
<style scoped>
.menu {
    background: rgb(255, 255, 255, 0.7);
    width: 200px;
    height: 300px;
    border-radius: 5px;
    padding: 5px;
    box-sizing: border-box;
    height: auto;
}

.menu1 {

    width: 200px;
    border-radius: 5px;

    box-sizing: border-box;
    height: auto;
}

.desk {
    height: 100%;
}

.iconlist {
    height: 100%;
    position: absolute;
    top: 0px;
    display: flex;
    flex-direction: column;
    left: 0;
}

.menuitem1 {
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 10px;
    border-radius: 5px;
    cursor: pointer;

}

.menuitem {
    width: 100%;
    height: 40px;
    line-height: 40px;
    box-sizing: border-box;
    padding-left: 10px;

    cursor: pointer;
    border-radius: 5px;

}

.menuitem:hover {
    background-color: #cfdbe6;
}

.menuitem img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.menuitem1:hover {
    background-color: #cfdbe6 !important;
}

.menuitem1 img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
    margin-right: 5px;
}

.flex {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.item {
    height: 72px;
    width: 76px;
    padding: 0px 10px;
    box-sizing: border-box;
    margin-bottom: 20px;
    margin-right: 20px;
    cursor: pointer;

}

.img {
    width: 100%;
    text-align: center;

}

.img img {
    width: 50px;
    height: 50px;
}

.name {
    text-align: center;
    font-size: 10px;
    color: #fff;
}

.item:hover {
    background: #fff3;
}
</style>
